<template>
  <div class="content-drawer">
    <div v-if="title === $t('shoppingCart')" class="cart-con">
      <ul>
        <li v-for="(goods, goodsIndex) in cartList" :key="goodsIndex">
          <div>
            <img
              :src="goods.goodsSku.thumbnail"
              width="90"
              height="90"
              alt=""
            />
          </div>
          <div>
            <p
              class="hover-color"
              @click="
                linkTo(
                  `/goodsDetail?skuId=${goods.goodsSku.id}&goodsId=${goods.goodsSku.goodsId}`
                )
              "
            >
              {{ goods.goodsSku.goodsName }}
            </p>
            <p class="price">
              {{ goods.goodsSku.price | unitPrice("$")
              }}<span>&nbsp; x{{ goods.num }}</span>
            </p>
          </div>
          <span class="del hover-color" @click="delGoods(goods.goodsSku.id)">{{
            $t("delete")
          }}</span>
        </li>
      </ul>
      <Button
        size="large"
        class="mt_10"
        type="primary"
        @click="linkTo('/cart')"
        long
        >{{ $t("goShopping") }}</Button
      >
    </div>

    <div v-else-if="title === $t('myOrders')" class="order-con">
      <ul>
        <li v-for="(order, orderIndex) in orderList" :key="orderIndex">
          <div class="order-status">
            <span>{{ filterOrderStatus(order.orderStatus) }}</span
            ><span>{{ order.createTime }}</span>
          </div>
          <div class="goods-img">
            <img
              :src="img.image"
              @click="
                linkTo(`/goodsDetail?skuId=${img.skuId}&goodsId=${img.goodsId}`)
              "
              v-for="(img, imgIndex) in order.orderItems"
              :key="imgIndex"
              width="40"
              height="40"
              alt=""
            />
          </div>
          <div class="order-handle">
            <span>{{ order.flowPrice | unitPrice("$") }}</span
            ><span
              class="hover-color"
              @click="linkTo(`home/OrderDetail?sn=${order.sn}`)"
              >{{ $t("view") + $t("orders") }}</span
            >
          </div>
        </li>
      </ul>
      <Button type="primary" @click="linkTo('/home/MyOrder')" long
        >{{ $t("view") }}{{ $t("all") }}{{ $t("orders") }}</Button
      >
    </div>

    <div v-else-if="title === $t('coupons')" class="coupon-con">
      <ul class="coupon-list">
        <li
          v-for="(coupon, index) in couponList"
          class="coupon-item"
          :key="index"
        >
          <div class="c-left">
            <div>
              <span
                v-if="coupon.couponType === 'PRICE'"
                class="fontsize_12 global_color"
                >$<span class="price">{{
                  coupon.price | unitPrice
                }}</span></span
              >
              <span
                v-if="coupon.couponType === 'DISCOUNT'"
                class="fontsize_12 global_color"
                ><span class="price">{{ coupon.couponDiscount }}</span
                >{{ $t("discount") }}</span
              >
              <span class="describe"
                >{{ $t("full") }}{{ coupon.consumeThreshold
                }}{{ $t("davailable") }}</span
              >
            </div>
            <p>
              {{ $t("scopeOfUse") }}：{{
                useScope(coupon.scopeType, coupon.storeName)
              }}
            </p>
            <p>{{ $t("expirationDate") }}：{{ coupon.endTime }}</p>
          </div>
          <b></b>
          <a class="c-right" @click="receive(coupon)">{{ $t("claimNow") }}</a>
          <i class="circle-top"></i>
          <i class="circle-bottom"></i>
        </li>
      </ul>
    </div>
    <div v-else-if="title === $t('myFootprints')" class="tracks-con">
      <ul>
        <li v-for="(track, trackIndex) in tracksList" :key="trackIndex">
          <img
            :src="track.thumbnail"
            :alt="track.thumbnail"
            @click="
              linkTo(`/goodsDetail?skuId=${track.id}&goodsId=${track.goodsId}`)
            "
            width="100"
            height="100"
          />
          <div @click="addToCart(track.id)">
            {{ $t("join") }} {{ $t("shoppingCart") }}
          </div>
          <p class="global_color">{{ track.price | unitPrice("$") }}</p>
        </li>
      </ul>
      <div
        class="hover-color"
        style="text-align: center"
        @click="linkTo('/home/MyTracks')"
      >
        {{ $t("view") }} {{ $t("more") }}>>
      </div>
    </div>
    <div v-else-if="title === $t('myFavorites')" class="collect-con">
      <ul>
        <li v-for="(collect, collectIndex) in collectList" :key="collectIndex">
          <img
            :src="collect.image"
            :alt="collect.image"
            @click="
              linkTo(
                `/goodsDetail?skuId=${collect.skuId}&goodsId=${collect.goodsId}`
              )
            "
            width="100"
            height="100"
          />
          <div @click="addToCart(collect.skuId)">
            {{ $t("join") }} {{ $t("shoppingCart") }}
          </div>
          <span class="del-icon" @click.stop="cancelCollect(collect.skuId)">
            <Icon type="md-trash" />
          </span>
          <p class="global_color">{{ collect.price | unitPrice("$") }}</p>
        </li>
      </ul>
      <div
        class="hover-color"
        style="text-align: center"
        @click="linkTo('/home/Favorites')"
      >
        {{ $t("view") }} {{ $t("more") }}>>
      </div>
    </div>
    <Spin v-if="loading" fix></Spin>
  </div>
</template>

<script>
import {
  cartGoodsAll,
  delCartGoods,
  addCartGoods,
  cartCount,
} from "@/api/cart.js";
import { getOrderList } from "@/api/order";
import {
  couponList,
  receiveCoupon,
  tracksList,
  collectList,
  cancelCollect,
} from "@/api/member.js";
export default {
  name: "Drawer",
  props: {
    title: {
      default: "",
      type: String,
    },
  },
  watch: {
    title(val) {
      switch (val) {
        case this.$t("shoppingCart"):
          this.getCartList();
          break;
        case this.$t("myOrders"):
          this.getOrderList();
          break;
        case this.$t("myFootprints"):
          this.getTracksList();
          break;
        case this.$t("coupons"):
          this.getCouponList();
          break;
        case this.$t("myFavorites"):
          this.getCollectList();
          break;
      }
    },
  },
  data() {
    return {
      loading: false, // 控制spin显隐
      cartList: [], // 购物车列表
      couponList: [], // 优惠券列表
      orderList: [], // 订单列表
      collectList: [], // 收藏列表
      tracksList: [], // 足迹列表
      orderStatusList: [
        // 订单状态
        {
          name: this.$t("nonPayment"),
          status: "UNPAID",
        },
        {
          name: this.$t("paid"),
          status: "PAID",
        },
        {
          name: this.$t("wfs"),
          status: "UNDELIVERED",
        },
        {
          name: this.$t('shipped'),
          status: "DELIVERED",
        },
        {
          name: this.$t('done'),
          status: "COMPLETED",
        },
        {
          name: this.$t('wfv'),
          status: "TAKE",
        },
        {
          name: $t('canceled'),
          status: "CANCELLED",
        },
      ],
    };
  },
  methods: {
    getCartList() {
      // 获取购物车列表
      this.loading = true;
      cartGoodsAll().then((res) => {
        this.loading = false;
        this.cartList = res.result.skuList;
      });
    },
    // 删除商品
    delGoods(id) {
      delCartGoods({ skuIds: id }).then((res) => {
        if (res.success) {
          this.$Message.success(this.$t("delete") + this.$t("succeed"));
          this.getCartList();
          cartCount().then((res) => {
            this.$store.commit("SET_CARTNUM", res.result);
            this.Cookies.setItem("cartNum", res.result);
          });
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    filterOrderStatus(status) {
      // 获取订单状态中文
      const ob = this.orderStatusList.filter((e) => {
        return e.status === status;
      });
      return ob[0].name;
    },
    receive(item) {
      // 领取优惠券
      receiveCoupon(item.id).then((res) => {
        if (res.success) {
          this.$Modal.confirm({
            title: this.$t('get') + this.$t('coupons'),
            content: `<p>${this.$t('get') + this.$t('coupons') + this.$t('succeed')}</p>`,
            okText: this.$t('my') + this.$t('coupons'),
            cancelText: this.$t('uii'),
            onOk: () => {
              this.$router.push("/home/Coupons");
            },
            onCancel: () => {
              if (item.storeId !== "0") {
                this.$router.push({
                  path: "/merchant",
                  query: { id: item.storeId },
                });
              } else {
                if (item.scopeType === "PORTION_GOODS_CATEGORY") {
                  this.$router.push({
                    path: "/goodsList",
                    query: { categoryId: item.scopeId },
                  });
                } else {
                  this.$router.push({ path: "/goodsList" });
                }
              }
            },
          });
        }
      });
    },
    useScope(type, storeName) {
      // 判断优惠券使用范围
      let shop = this.$t('platform');
      let goods = this.$t("all") + this.$t('goods');
      if (storeName !== "platform") shop = storeName;
      switch (type) {
        case "ALL":
          goods = this.$t("all") + this.$t('goods');
          break;
        case "PORTION_GOODS":
          goods = this.$t('partial') + this.$t('goods');
          break;
        case "PORTION_GOODS_CATEGORY":
          goods = this.$t('partial') + this.$t('category') + this.$t('goods');
          break;
      }
      return `${shop}${goods}${this.$t('available')}`;
    },
    addToCart(id) {
      // 添加商品到购物车
      const params = {
        num: 1,
        skuId: id,
      };
      this.loading = true;
      addCartGoods(params)
        .then((res) => {
          this.loading = false;
          if (res.success) {
            this.$Message.success(this.$t('goods') + this.$t('add') + this.$t('succeed'));
          } else {
            this.$Message.warning(res.message);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    getCouponList() {
      // 获取优惠券列表
      // this.loading = true;
      const params = {
        pageNumber: 1,
        pageSize: 10,
      };
      couponList(params)
        .then((res) => {
          this.loading = false;
          if (res.success) {
            this.couponList = res.result.records;
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    getOrderList() {
      // 获取订单列表
      this.loading = true;
      const params = {
        pageNumber: 1,
        pageSize: 10,
        tag: "ALL",
      };
      getOrderList(params).then((res) => {
        this.loading = false;
        if (res.success) {
          this.orderList = res.result.records;
        }
      });
    },
    getCollectList() {
      // 获取收藏列表
      const params = {
        pageNumber: 1,
        pageSize: 10,
        type: "GOODS",
      };
      this.loading = true;
      collectList(params).then((res) => {
        this.loading = false;
        this.collectList = res.result.records;
      });
    },
    cancelCollect(id) {
      // 取消商品收藏
      cancelCollect("GOODS", id).then((res) => {
        if (res.success) {
          this.$Message.success(this.$t('cancel') + this.$t('collect') + this.$t('succeed'));
          this.getCollectList();
        }
      });
    },
    getTracksList() {
      // 获取足迹列表
      const params = {
        pageNumber: 1,
        pageSize: 20,
      };
      this.loading = true;
      tracksList(params)
        .then((res) => {
          this.tracksList = res.result.records;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style scoped lang="scss">
@import "../../assets/styles/coupon.scss";
@import "./drawer.scss";
.coupon-item {
  overflow: hidden;
  background-color: #fff;
  height: 120px;
  .c-left {
    padding: 15px;
  }
  .c-right {
    width: 38px;
    padding: 13px;
    font-size: 14px;
  }
  i {
    right: 30px;
    background-color: #eee;
  }
}
</style>
